<template>
	<view class="content">
		<!-- <view class="headerback" @click="goback">
			<image src="../../static/img/back_icon.png" mode=""></image>
		</view> -->
		<view class="goback" @click="goback">
			<image class="goback-icon" src="/static/img/back.png" mode=""></image>
		</view>
		
		<view class="header-wrap" v-if="isDh">
			<view class="header-left" @click="goback">
				<image src="../../static/img/back_icon1.png" mode=""></image>
			</view>
			<view class="header-title">
				<text>{{user.name}}</text>
			</view>
			<view class="header-right">
				
			</view>
		</view>
		
		
		<view class="album-wrap">
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" @change="photoChange"  :current="photoCurrent">
				<!-- 是查看自己的信息 -->
				<swiper-item  v-for="(item, index) in photo" :key="index"  touchable="true"  @click="previewImage1(photo, index)"> 
					<image  class="swiper-img" :src="item.filename" :class="[item.enabled == 0 ? 'reviewing' : '', item.enabled == 2 ? 'disabled' : '']" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="smallbox">
				<image src="/static/img/user_home/addpic.png" class="upimg" @click="upload" v-if="myInfo.id == user.id"></image>
				 <!-- 个人相册 -->
				<view class="img-list" v-for="(item, index) in photo" :key="index" :class="photoCurrent==index?'active':''">
					<image  :src="item.filename" :class="[item.enabled == 0 ? 'reviewing' : '', item.enabled == 2 ? 'disabled' : '']" class="items" @click="changIndex(index)"></image>	
				</view>
			</view>
		</view>
		
		<view class="user-wrap">
			<view class="name-wrap">
				<view class="title" style="font-size: 46rpx;">{{user.name}}</view>
			</view>
			<view class="user-info">
				<view :class="['sex-wrap', 'sex' + user.sex]">
					<image class="sex-icon" :src="'/static/img/sex' + user.sex + '.png'" mode=""></image>
					<text class="age">{{user.age}}</text>
				</view>
				<view v-if="user.city" class="city-wrap">
					<image class="city-icon" src="/static/img/location1.png" mode=""></image>
					<text class="city">{{user.adname==""?user.city:user.adname}}</text>
				</view>
			</view>
			<view style="font-size: 36rpx;color: #0e0e0e;margin-top: 10rpx;">ID:{{user.lid}}</view>
			
			<view class="tag-wrap">
				<view :class="['tag-item', 'tag' + index]" v-for="(item, index) in user.like_tag" :key="item.id">{{item.name}}</view>
				<view :class="['tag-item', 'tag' + index]" v-for="(item, index) in user.tag" :key="item.id">{{item.name}}</view>
			</view>
			<view v-show="!!user.think" class="user-data">
				<view class="title">个性签名</view>
				<view class="data-item">{{user.think}}</view>
			</view>
			<view class="user-data" style="border-top:1rpx solid #ededed">
				<view class="titles">资料</view>
			</view>
			
			<view class="user-data jiben">
				<view class="title">基本信息</view>
				<view class="data-item">身高：{{!!user.height ? user.height : '未填写'}}</view>
				<view class="data-item">月收入：{{user.income | getIncome}}</view>
				<view class="data-item">职业：{{!!user.occupation ? user.occupation : '未填写'}}</view>
				<view class="data-item">婚姻状况：{{user.marriage | getMarriage}}</view>
				<view class="data-item">学历：{{user.education | getEducation}}</view>
				<view class="data-item">住房情况：{{user.house | getHouse}}</view>
				<view class="data-item">微信号：{{soWechat()}}</view>
			</view>
			<view v-if="group.length > 0" class="user-data">
				<view class="title">Ta的群组</view>
				<view class="group-list">
					<view class="group-item" v-for="item in group" :key="item.id" @click="openGroupDetail(item)">
						<image class="group-avatar" :src="user.avatar" mode="aspectFill"></image>
						<view class="group-info">
							<text class="name">{{item.name}}</text>
							<text class="desc">{{item.description}}</text>
						</view>
						<view class="uni-icon uni-icon-arrowright"></view>
					</view>
				</view>
			</view>
			<view v-if="gifts.length > 0 && !ish" class="user-data">
				<view class="title">收到礼物</view>
				<view class="gift-list">
					<block v-for="item in gifts" :key="item.gid">
						<view v-if="!!item.gift" class="gift-item">
							<view class="gift-img">
								<image :src="item.gift.file" mode=""></image>
							</view>
							<text class="gift-name">{{item.gift.name}}</text>
							<text class="gift-count">x{{item.size}}</text>
						</view>
					</block>
				</view>
			</view>
			<view v-if="dynamic.length > 0" class="user-data">
				<view class="title">Ta的动态</view>
				<view class="dynamic-list">
					<view class="dynamics-item" v-for="(item, i) in dynamic" :key="i">
						<view class="dynamics-user-wrap">
							<image class="avatar" :src="item.user.avatar" mode="aspectFill"></image>
							<view class="user-info">
								<view class="name-wrap">
									<text class="name">{{item.user.name}}</text>
									<view :class="['sex-wrap', 'sex' + item.user.sex]">
										<image class="sex-icon" :src="'/static/img/sex' + item.user.sex + '.png'" mode=""></image>
										<text class="age">{{item.user.age}}</text>
									</view>
								</view>
								<view class="time">{{item.created_at | timeFormat}}</view>
							</view>
						</view>
						<view class="dynamics-content">
							<!-- 先判断是否自己发布，再是否收费，是否已支付 -->
							<view class="dynamics_charge" @click="dynamicCharge(item,i)" v-if="!(myInfo.id == item.uid) && item.rose >= 1 && item.pays == false">
								<view>
								</view>
							</view>
							<view class="description">{{item.description}}</view>
							<view class="media-wrap">
								<view v-if="item.type == 1" class="img" v-for="(media, j) in item.files" :key="media.id" @click="previewImage(item.files, j)">
									<image :class="{'vague_2': !(myInfo.id == item.uid) && item.rose >= 1 && item.pays == false}" :src="media.file + '?imageView2/1/w/300/h/300'" mode=""></image>
								</view>
								<view v-if="item.type == 2" class="video" v-for="(media, k) in item.files" :key="media.id" @click="openDynamicsVideo(media)">
									<image class="cover-image" :class="{'vague_2': !(myInfo.id == item.uid) && item.rose >= 1 && item.pays == false}" :src="media.file + '?vframe/jpg/offset/1'" mode="aspectFill"></image>
									<image class="player-icon" src="/static/img/player_icon.png" mode=""></image>
								</view>
							</view>

							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="myInfo.id != user.id" class="float-wrap" @click="openIM">
			<image src="/static/img/im.png" mode=""></image>
		</view>
		<view v-else class="float-wrap editmsg" :class="isDh?'slowhide':''" @click="editfun">
			<view class="editbox"><image src="/static/img/user_home/edit.png" class="editicon"></image>编辑资料</view>
		</view>
	</view>
</template>

<script>
	import util from "@/common/util.js"
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	export default {
		data() {
			return {
				ish:false,  //是否隐藏 
				myInfo: {
					id: '',
				},
				giftWechat: '', // 可看微信号
				user: {
					id: '',
					lid: '',
					name: '',
					sex: '',
					age: '',
					city: '',
					like_tag: [],
					tag: [],
					think: '',
					height: '',
					income: 0,
					occupation: '',
					marriage: 0,
					education: 0,
					house: 0,
					requirement: '',
					avatar:'',  //用户头像
					wechat: '', // 微信号
				},
				photo: [],
				gifts: [],
				group: [],
				dynamic: [],
				page: 1,
				eduList: ['', '初中及以下', '高中及中专', '大专', '本科', '硕士及以上'],
				incomeList: ['', '2000以下', '2000-4000', '4000-6000', '6000-10000', '10000-20000', '20000以上'],
				
				qiniuToken: '',
				domain: '',
				progress: 0,
				files: [],
				photoCurrent:0,  //当前轮播项目
				form: {
					file: ''
				},
				// 是否显示白色背景导航
				isShow:false,
				isDh:false,
				isvideo:false,  //是否从短视频页面跳转过来的
			}
		},
		onLoad(options) {
			const hiddenInfo = uni.getStorageSync('isHidden');
			if(hiddenInfo.isHidden=="1"){
				this.ish=true;
			}
			
			let optionuser = JSON.parse(options.user);
			
			this.user.id = optionuser.id;
			this.user.name = optionuser.name;
			this.user.avatar = optionuser.avatar;
			if(options.isvideo){
				this.isvideo=true;
			}
			uni.setNavigationBarTitle({
				title: this.user.name
			})
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
				}
			} catch (e) {
				console.warn(e)
			}
			this.getgif();
		},
		onUnload() {
			
		},
		onReady() {
			this.getUserDetail();
			this.getQiniuToken();
			this.getUserPhotos();
			
			
		},
		onReachBottom(){
			// getUserDetail
			this.page++;
			this.getUserDetail();
		},
		onNavigationBarButtonTap(e) {
			if (this.user.id == this.myInfo.id) {
				uni.showActionSheet({
					itemList: ['编辑资料'],
					success: res => {
						if (res.tapIndex == 0) {
							let myInfo = {
								id: this.myInfo.id,
								name: this.myInfo.name,
								token: this.myInfo.token,
								think: this.myInfo.think,
								wechat: this.myInfo.wechat,
								age: this.myInfo.age,
								education: this.myInfo.education,
								marriage: this.myInfo.marriage,
								height: this.myInfo.height,
								income: this.myInfo.income,
								occupation: this.myInfo.occupation,
								house: this.myInfo.house,
								charm: this.myInfo.charm,
								blood: this.myInfo.blood,
								place: this.myInfo.place,
								cohabitation: this.myInfo.cohabitation
							}
							uni.navigateTo({
								url: '../my/info?userinfo=' + JSON.stringify(myInfo)
							})
						}
					}
				});
				return false;
			}
			uni.showActionSheet({
				itemList: ['举报', '拉黑'],
				success: res => {
					if (res.tapIndex == 0) {
						uni.navigateTo({
							url: '../my/complaints?touid=' + this.user.id
						})
					}
					if (res.tapIndex == 1) {
						uni.showModal({
							title: '',
							content: '确认要把'+this.user.name+'添加到黑名单？',
							success: res => {
								if (res.confirm) {
									uni.showLoading({
										title: ''
									});
									this.$api.api.ajaxData({
										method: 'V1.BlackUser',
										uid: this.myInfo.id,
										token: this.myInfo.token,
										touid: this.user.id,
									}, res => {
										uni.hideLoading();
										if (res.status) {
											this.$tim.addToBlacklist({
												userIDList: [this.IDBEFORE + this.user.id + ''],
											}).then(imResponse => {
												uni.showToast({
													title: '成功把'+this.user.name+'添加到黑名单',
													position: 'bottom',
													icon: 'none'
												})
												console.log('成功添加到黑名单', imResponse.data);
											}).catch(imError => {
												console.warn('添加用户到黑名单列表失败', imError);
											});
										} else {
											uni.showToast({
												title: res.msg,
												position: 'bottom',
												icon: 'none'
											})
										}
									}, err => {
										uni.hideLoading();
										uni.showToast({
											title: '网络错误，请稍后再试',
											position: 'bottom',
											icon: 'none'
										});
									})
								}
							}
						});
					}
				}
			});
		},
		onPageScroll(object){
			if(object.scrollTop>120){
				this.isShow=true;
			}else{
				this.isShow=false;
			}
			// console.log('滚动距离',object.scrollTop)
			// console.log('是否显示导航',this.isShow)
		},   
		
		methods: {
			//查看动态收费
			dynamicCharge(item,i){
				let _this = this;
				uni.showModal({
				title: '',
				content: `是否支付${item.rose}米币查看此${item.type == '1' ? '图片' : '视频'}`,
				success: res => {
						if (res.confirm) {
								_this.$api.api.ajaxData({
									method: 'V1.DynamicShow',
									app_id: 'EMqh2oxKpkqioula',
									sign: 'q',
									nonce: '2412',
									uid: this.myInfo.id,
									did: item.id
								}, res => {
									if(res.status){
										_this.dynamic[i].pays = true;
									} else {
										uni.showToast({
											title: res.msg,
											position: 'bottom',
											icon: 'none'
										});
									}
								})
							}

						}
				});
			},
			// 加工页面微信号显示
			soWechat(){
				return this.user.wechat == '********' ? '送'+ this.giftWechat +'可看' : this.user.wechat;
			},
			// 可看微信号的礼物
			getgif(){
				this.$api.api.ajaxData({
					method: 'V1.Gift',
					uid: this.myInfo.id,
					token: this.myInfo.token
				}, res => {
					res.data.list.forEach(item =>{
						if(item.type == '2'){
							this.giftWechat = item.name
							return;
						}
					})
				})
			},
			// 编辑资料
			editfun(){
				let myInfo = {
					id: this.myInfo.id,
					name: this.myInfo.name,
					token: this.myInfo.token,
					think: this.myInfo.think,
					wechat: this.myInfo.wechat,
					age: this.myInfo.age,
					education: this.myInfo.education,
					marriage: this.myInfo.marriage,
					height: this.myInfo.height,
					income: this.myInfo.income,
					occupation: this.myInfo.occupation,
					house: this.myInfo.house,
					charm: this.myInfo.charm,
					blood: this.myInfo.blood,
					place: this.myInfo.place,
					cohabitation: this.myInfo.cohabitation
				}
				uni.navigateTo({
					url: '../my/info?userinfo=' + JSON.stringify(myInfo)
				})
				
			},
			goback: function () {
				
				// uni.navigateBack({
				// 	delta: currentWebview-1;
				// });
				if(this.isvideo){
					uni.switchTab({
						url: '../home/home'
					});
				}else{
					uni.navigateBack({
						delta: 1,
					});
				}
				
			},
			getUserDetail: function () {
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.Detail',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					touid: this.user.id,
					page: this.page,
				}, res => {
					uni.hideLoading();
					if (res.status) {
						if(this.page == 1){
							this.user.like_tag = res.data.info.like_tag;
							this.user.tag = res.data.info.tag;
							this.gifts = res.data.gifts;
							this.group = res.data.group;
							this.dynamic = res.data.dynamic;
							this.user.lid = res.data.info.lid;
							this.user.avatar = res.data.info.avatar;
							this.user.sex = res.data.info.sex;
							this.user.age = res.data.info.age;
							this.user.city = !!res.data.info.city?res.data.info.city:'';
							this.user.adname = !!res.data.info.adname?res.data.info.adname:'';
							this.user.pname = !!res.data.info.pname?res.data.info.pname:'';
							this.user.think = !!res.data.info.think ? res.data.info.think : '';
							this.user.height = res.data.info.height;
							this.user.income = res.data.info.income;
							this.user.occupation = res.data.info.occupation;
							this.user.marriage = res.data.info.marriage;
							this.user.education = res.data.info.education;
							this.user.house = res.data.info.house;
							this.user.requirement = res.data.info.requirement;
							this.user.wechat = res.data.info.wechat;
	
							if (!!res.data.requir && res.data.requir.length > 0) {
								
								this.user.requirement = '我想在' + city + '找对象，年龄' + res.data.requir[0].min_age + '-' + res.data.requir[0].max_age + '岁'
								if (!!res.data.requir[0].min_height) {
									this.user.requirement += '，身高' + res.data.requir[0].min_height + '-' + res.data.requir[0].max_height + 'cm';
								}
								if (!!res.data.requir[0].education) {
									this.user.requirement += '，学历最低' + this.eduList[res.data.requir[0].education];
								}
								if (!!res.data.requir[0].income) {
									this.user.requirement += '，月收入' + this.incomeList[res.data.requir[0].income];
								}
							}
							this.joinfriend = res.extra.joinfriend
						} else {
							this.dynamic = this.dynamic.concat(res.data.dynamic);
						}
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			openGroupDetail: function (item) {
				let group = {
					id: item.id,
					im_gid: item.im_gid,
					name: item.name,
					description: item.description,
				}
				uni.navigateTo({
					url: '../message/group?group=' + JSON.stringify(item)
				})
			},
			openIM: function () {
				let to = {
					conversationID: 'C2C' + this.IDBEFORE + this.user.id,
					id: this.IDBEFORE + this.user.id,
					name: this.user.name,
					avatar: this.user.avatar,
					joinfriend: this.joinfriend
				}
				uni.navigateTo({
					url: '../message/im?to=' + encodeURIComponent(JSON.stringify(to))
				});
			},
			previewImage1: function (list, index) {
				let templist = [];
				for (let i = 0; i < list.length; i++) {
					templist.push(list[i].filename);
				}
				uni.previewImage({
					current: index,
					urls: templist,
			  });
			},
			previewImage: function (list, index) {
				let templist = [];
				for (let i = 0; i < list.length; i++) {
					templist.push(list[i].file);
				}
				uni.previewImage({
					current: index,
					urls: templist,
			  });
			},
			openDynamicsVideo: function (item) {
				let media = {
					file: item.file
				}
				uni.navigateTo({
					url: '../video/video?media=' + encodeURIComponent(JSON.stringify(media))
				})
			},
			
			// 获取用户图片
			getUserPhotos(){
				this.$api.api.ajaxData({
					method: 'V1.UserPhotos',
					uid: this.user.id,
					// token: this.myInfo.token,
					page: 1
				}, res => {
					if (res.status) {
						let _photo = [{
							filename: this.user.avatar
						}]
						
						// 判断此用户是否是app登录用户
						if(this.user.id != this.myInfo.id){
							res.data.map(item=>{
								if(item.enabled==1){
									 _photo.push(item)
								}
							})
							this.photo = _photo;
						}else{
							this.photo = _photo.concat(res.data);
						}
					}
				})
			},
			getQiniuToken: function () {
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					if (res.status) {
						this.qiniuToken = res.data.token
						this.domain = res.data.domain
					}
				})
			},
			// 上传相册
			upload: function () {
				uni.chooseImage({
					count: 9,
					sourceType: ['camera', 'album'],
					sizeType: ['original', 'compressed'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let tempPaths = res.tempFilePaths[i].split('/');
							uni.showLoading({
								title: this.progress + '%'
							});
							qiniuUploader.upload(res.tempFilePaths[i], qiniu => {
								
								uni.hideLoading();
								this.files.push(tempPaths[tempPaths.length - 1])
								this.photo.push({
									filename: res.tempFilePaths[i],
									enabled: 0,
								})
								
								// 上传图片审核中
								this.form.file = this.files.join();
								
								this.$api.api.ajaxData({
									method: 'V1.UserUpload',
									uid: this.myInfo.id,
									token: this.myInfo.token,
									type: '0',
									file: this.form.file,
								}, res => {
									uni.hideLoading();
									uni.showToast({
										title: res.msg,
										position: 'bottom',
										icon: 'none'
									});
									if (res.status) {
										uni.showToast({
											title: '上传成功图片正在审核中',
											position: 'bottom',
											icon: 'none'
										});
									}
								}, err => {
									uni.hideLoading();
									uni.showToast({
										title: '网络错误，请稍后再试',
										position: 'bottom',
										icon: 'none'
									});
								})
								
							}, err => {
								console.log('七牛上传失败', JSON.stringify(err));
							}, {
								region: 'SCN',
								domain: this.domain,
								key: tempPaths[tempPaths.length - 1],
								uptoken: this.qiniuToken,
							}, res => {
								this.progress = res.progress;
							}, () => {
								// 取消上传
							}, () => {
								// `before` 上传前执行的操作
							}, () => {
								// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
							});
						}
					}
				});
			},
			// 轮播滑动返回值
			photoChange(e){
				this.photoCurrent=e.detail.current;
			},
			// 改变当前轮播选中值
			changIndex(nowindex){
				this.photoCurrent=nowindex;
			}
		},
		filters: {
			getIncome: function (value) {
				let incomeList = ['未填写', '2000以下', '2000-4000', '4000-6000', '6000-10000', '10000-20000', '20000以上'];
				return incomeList[value];
			},
			getMarriage: function (value) {
				let marriageList = ['未填写', '未婚', '离婚', '丧偶'];
				return marriageList[value];
			},
			getEducation: function (value) {
				let eduList = ['未填写', '初中及以下', '高中及中专', '大专', '本科', '硕士及以上'];
				return eduList[value];
			},
			getHouse: function (value) {
				let houseList = ['未填写', '已购房屋', '与父母同住', '租房', '其他'];
				return houseList[value];
			},
			timeFormat: function (value) {
				let now = new Date().getTime();
				let	oldTime = new Date(value.replace(/-/g, '/')).getTime();
				return util.dateUtils.humanize(now - oldTime);
			},
		},
		watch:{
			isShow(value){
				this.isDh=value;
				// if(value){
				// 	setTimeout(() => {
				// 		// 改变手机状态栏颜色
				// 		uni.setNavigationBarColor({
				// 			frontColor: "#000000",
				// 			// backgroundColor: (value?"#FFFFFF":"#000000"),
				// 		});
				// 	}, 150);
				// }else{
				// 	setTimeout(() => {
				// 		// 改变手机状态栏颜色
				// 		uni.setNavigationBarColor({
				// 			frontColor: "#FFFFFF",
				// 			// backgroundColor: (value?"#FFFFFF":"#000000"),
				// 		});
				// 	}, 150);
				// }
				
			}
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.goback {
		position: fixed;
		top: var(--status-bar-height);
		left: 22rpx;
		z-index: 999;
		padding: 20rpx;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 100rpx;
	}
	.goback-icon {
		width: 60rpx;
		height: 60rpx;
	}
	
	.header-wrap {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		padding-top: var(--status-bar-height);
		background-color: #FFFFFF;
		
		
		.header-left {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.header-title {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			text {
				font-size: 36rpx;
				color: #000;
			}
		}
		.header-right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	
	page {
		background-color: #FFFFFF;
	}
	.headerback{
		position: fixed;
		top: 66rpx;
		left: 32rpx;
		width: 100rpx;
		height: 100rpx;
		z-index: 999;
		// background-color: #EE3475;
		>image{
			width: 40rpx;
			height: 40rpx;	
		}
	}
	//  轮播板块用户头像
	.album-wrap {
		width: 750rpx;
		height: 530rpx;
		position: relative;
		.swiper {
			width: 750rpx;
			height: 530rpx;
			.swiper-img {
				width: 750rpx;
				height: 530rpx;
				&.reviewing::after {
					content: '审核中……';
					display: block;
					width: 750rpx;
					height: 530rpx;
					text-align: center;
					line-height: 530rpx;
					font-size: 32rpx;
					color: #fff;
					background-color: rgba(0,0,0,0.7);
					position: absolute;
					left: 0;
					top: 0;
				}
				&.disabled::after {
					content: '审核不通过';
					display: block;
					width: 750rpx;
					height: 530rpx;
					text-align: center;
					line-height: 530rpx;
					font-size: 32rpx;
					color: #fff;
					background-color: rgba(0,0,0,0.9);
					position: absolute;
					left: 0;
					top: 0;
				}
				
			}
		}
		// 小轮播图
		.smallbox{
			position: absolute;
			bottom: 36rpx;
			left: 0rpx;
			height: 80rpx;
			width: 100%;
			// padding-left: 56rpx;
			display: inline;
			white-space: nowrap;
			overflow-x: scroll;
			float: left;
			// overflow-y: hidden;

			.upimg{
				width: 80rpx;
				height: 80rpx;
				float: left;
				display:inline-block;
				margin-left: 56rpx;
			}
			.img-list{
				// width: 600rpx;
				height: 80rpx;
				white-space: nowrap;
				overflow-x:scroll;
				// display: inline;
				display: inline-block;
				&.active{
					>.items{
						border: 1rpx solid #fff;
						box-sizing: border-box;
					}
				}
				.items{
					width: 80rpx;
					height: 80rpx;
					float: left;
					margin-left: 34rpx;
					display:inline-block;
					border-radius: 14rpx;
					&.reviewing::after {
						content: '审核中……';
						display: block;
						width: 80rpx;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 20rpx;
						color: #fff;
						background-color: rgba(0,0,0,0.7);
						border-radius: 14rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
					&.disabled::after {
						content: '审核不通过';
						display: block;
						width: 80rpx;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 20rpx;
						color: #fff;
						background-color: rgba(0,0,0,0.9);
						border-radius: 14rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
					
				}
			}
		}
	}
	.userbg{
		width: 750rpx;
		height: 348rpx;
	
	}
	
	.user-wrap {
		background-color: #fff;
		padding: 0 32rpx 300rpx 32rpx;
		box-sizing: border-box;
		display: inline-block;
		>.avatar{
			width: 168rpx;
			height: 168rpx;
			box-sizing: border-box;
			border: 2rpx solid #fff;
			border-radius: 50%;
			float: left;
			margin-top: -80rpx;
		}
		.name-wrap {
			// padding-left: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.title {
				font-size: 36rpx;
				color: #1c1c1c;
				font-weight: 700;
				margin:30rpx 0 10rpx 0;
			}
		}
		.user-info {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.sex-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 28rpx;
			padding: 5rpx 10rpx;
			border-radius: 28rpx;
			&.sex1 {
				background: #83d7ff;
			}
			&.sex2 {
				background: #fe9ab7;
			}
			.sex-icon {
				width: 28rpx;
				height: 28rpx;
			}
			.age {
				font-size: 28rpx;
				color: #fff;
				margin-left: 5rpx;
			}
		}
		.city-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 28rpx;
			padding: 5rpx 10rpx;
			border-radius: 28rpx;
			background: #4cbcfc;
			margin-left: 10rpx;
			.city-icon {
				width: 28rpx;
				height: 28rpx;
			}
			.city {
				font-size: 28rpx;
				color: #fff;
				margin-left: 5rpx;
			}
		}
	}
	.tag-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx 0;
		.tag-item {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			padding: 0 20rpx;
			border: 1rpx solid #eee;
			border-radius: 10rpx;
			margin: 10rpx 10rpx 0 0;
			&.tag0 {
				color: #32c5ff;
			}
			&.tag1 {
				color: #ba89ff;
			}
			&.tag2 {
				color: #fd5c89;
			}
			&.tag3 {
				color: #ba89ff;
			}
		}
	}
	.user-data {
		padding: 10rpx 0;
		clear: both;
		.titles {
			font-size: 36rpx;
			color: #0e0e0e;
			font-weight: 700;
			margin-bottom: 10rpx;
			margin-left: 14rpx;
		}
		.title {
			font-size: 30rpx;
			color: #0e0e0e;
			font-weight: 700;
			margin-bottom: 10rpx;
			margin-left: 22rpx;
		}
		.data-item {
			font-size: 30rpx;
			color: #1c1c1c;
			padding-left: 26rpx;
		}
		&.jiben{
			padding-left: 10rpx;
			>.title {
				margin-left: 10rpx;
			}
			>.data-item {
				float: left;
				font-size: 24rpx;
				color: #303343;
				background-color: #f6f1fe;
				padding:11rpx 20rpx;
				display: block;
				margin-right: 35rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				line-height: 24rpx;
			
			}
		}
		// border-bottom: 1rpx solid #ededed;
		margin-bottom: 34rpx;
		
		// 如花实名认证7-15修改
		.menu-item{
			height: 26rpx;
			width: 100%;
			margin-bottom: 70rpx;
			padding-left: 14rpx;
			.label {
				font-size: 26rpx;
				color: #1c1c1c;
				font-weight: 700;
				margin-bottom: 10rpx;
				float: left;
				padding-top: 4rpx;
				margin-right: 16rpx;
				
			}
			.unsm{
				width: 90rpx;
				height: 24rpx;
				margin-top: 14rpx;
			}
			.menu-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			text {
				font-size: 24rpx;
				color: #666;
			}
		}
		// 结束
		
	}
	.gift-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		padding: 5rpx;
	}
	.gift-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 170rpx;
		.gift-img {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			background-color: rgba(200,200,200,0.5);
			border-radius: 100rpx;
			overflow: hidden;
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.gift-name {
			font-size: 24rpx;
			color: #333333;
		}
		.gift-count {
			font-size: 20rpx;
			color: #666666;
		}
	}
	.group-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx;
		.group-avatar {
			display: block;
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
			margin-right: 10rpx;
		}
		.group-info {
			display: flex;
			flex-direction: column;
			flex: 1;
			.name {
				font-size: 30rpx;
				color: #333;
			}
			.desc {
				font-size: 24rpx;
				color: #666;
			}
		}
		.uni-icon {
			font-size: 24rpx;
			color: #999;
		}
	}
	.dynamics-item {
		background-color: #fff;
		margin-bottom: 10rpx;
		& + .dynamics-item {
			border-top: 1rpx solid #efefef;
		}
	}
	.dynamics-user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			background-color: $image-bg-color;
		}
		.user-info {
			display: block;
			flex: 1;
			margin: 0 10rpx;
			.name-wrap {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.name {
				font-size: 36rpx;
				color: #333;
				margin-right: 10rpx;
			}
			.sex-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 28rpx;
				padding: 5rpx 10rpx;
				border-radius: 28rpx;
				&.sex1 {
					background: #83d7ff;
				}
				&.sex2 {
					background: #fe9ab7;
				}
				.sex-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.age {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
			.time {
				font-size: 30rpx;
				color: #666666;
			}
		}
	}
	// 图片迷糊
	.vague_2{
		filter: blur(12px);
	}
	.dynamics-content {
		padding-left: 100rpx;
		position: relative;
		.dynamics_charge{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9;
		}
		.description {
			font-size: 32rpx;
			color: #333;
			padding: 0 10rpx;
		}
		.media-wrap {
			display: flex;
			flex-wrap: wrap;
			padding: 5rpx;
			.img {
				width: 200rpx;
				height: 200rpx;
				margin: 5rpx;
				box-sizing: border-box;
				overflow: hidden;
				image {
					display: block;
					width: 190rpx;
					height: 190rpx;
					border-radius: 10rpx;
				}

			}
			.video {
				width: 600rpx;
				height: 360rpx;
				padding: 5rpx;
				box-sizing: border-box;
				position: relative;
				overflow: hidden;
				.cover-image {
					display: block;
					width: 590rpx;
					height: 350rpx;
					border-radius: 10rpx;
				}
				.player-icon {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -25rpx;
					margin-right: -25rpx;
				}
			}
		}
	}
	.dynamics-menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.menu-item {
			display: flex;
			align-items: center;
			padding: 20rpx 40rpx;
			.menu-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			text {
				font-size: 36rpx;
				color: #666;
			}
		}
	}
	.float-wrap {
		position: fixed;
		right: 50rpx;
		bottom: 50rpx;
		image {
			display: block;
			width: 100rpx;
			height: 100rpx;
		}
		&.editmsg{
			width: 408rpx;
			height: 70rpx;
			font-size: 26rpx;
			background-color: #fe2e61;
			color: #fff;
			left: 50%;
			text-align: center;
			padding-top: 18rpx;
			border-radius: 40rpx;
			transform: translate(-50%,0);
			
			&.slowhide{
				display: none;
				
			}
			
			.editbox{
				display: flex;
				align-items: center;
				text-align: center;
				padding-left: 140rpx;
			}
			.editicon{
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>
